<template>
  <div class="innerPageTable-box-OneTwo innerPageTable-out-flex userManage">
     <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="modelForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <!-- 用户名 -->
        <Form-item :label="$t('module.userManage.userName')" prop="first">
          <Input
            type="text"
            :maxlength="30"
            v-model.trim="searchForm.first"
            :placeholder="$t('module.userManage.inputUserName')"
            @on-enter="search"
          />
        </Form-item>

        <!-- 邮箱 -->
        <Form-item :label="$t('module.userManage.email')" prop="email">
          <Input
            type="email"
            v-model.trim="searchForm.email"
            :placeholder="$t('module.userManage.inputEmail')"
            @on-enter="search"
          />
        </Form-item>

        <!-- 手机号 -->
        <Form-item :label="$t('module.userManage.phone')" prop="phone">
          <Input
            type="tel"
            v-model.trim="searchForm.phone"
            :placeholder="$t('module.userManage.inputPhone')"
            @on-enter="search"
            :maxlength="11"
          />
        </Form-item>
        <Form-item prop="button" class="search-solt-btn">
           <RPButton optType="search" @click="search" />
           <RPButton optType="reset" @click="reset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="userManage" :config="tableConfig">
      <div slot="table-bar">
        <RPButton optType="create" @click="addOrEditUser('add')" />
      </div>
    </InnerPageTable>
  </div>
</template>

<script>
import { queryUserList, deleteUser } from '@api/flowable/userManageAPI.js'
import { userManageColumns } from './columns.js'
import addOrEditUserPage from './addOrEditUser.vue'

export default {
  data() {
    return {
      searchForm: {
        first: '', // 用户名（为什么这么奇怪的字段，你问后端去……）
        email: '',
        phone: ''
      },
      tableConfig: {
        loadDataFn: ({ responseProcess, param }) => {
          queryUserList(param).then(({ data }) => {
            const res = {}
            res.records = data.list
            res.currentPage = data.pageNum
            res.total = data.total
            responseProcess(res)
          })
        },
        columnsFn: userManageColumns.bind(this),
        autoFirst: true,
        loading: false
      }
    }
  },
  methods: {
    addOrEditUser(row) {
      new this.$pageModal(
        addOrEditUserPage,
        {
          props: {
            userInfo: row === 'add' ? {} : row
          }
        },
        res => res && this.search()
      )
    },
    deleteUser(row) {
      new $confirm(this.$t('common.warning.confirmToDelete'), this).then(() => {
        deleteUser({ id: row.id }).then(() => {
          this.search()
          this.$Message.success(this.$t('common.deleteSuccess'))
        }).catch(() => this.$Message.warning(this.$t('module.launchApp.deleteFail')))
      })
    },
    search() {
      this.$refs['userManage'].load(this.searchForm)
    },
    reset() {
      this.$refs['modelForm'].resetFields()
      this.search()
    }
  }
}
</script>
